<template>
	<view class="uni-container">
		<view class="cell-page">
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options"
				:collection="collection" :getone="true" loadtime="manual">
				<view v-if="error">error:{{error.message}}</view>
				<view v-else-if="loading">
					<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
				</view>
				<view v-else-if="data">
					<view class="u-page__item">
						<up-cell-group>
							<up-cell title="【违法行为】" icon="tags"></up-cell>
							<up-cell>
								<template #title>
									<view class="u-slot-title">
										<text  user-select class="u-cell-text p-text">
											{{data.behavior}}
										</text>
									</view>
								</template>
							</up-cell>
						</up-cell-group>

						<up-cell-group>
							<up-cell title="【违反条款】" icon="tags"></up-cell>
							<up-cell>
								<template #title>
									<view class="u-slot-title">
										<text  user-select class="u-cell-text p-text">
											{{data.violation}}
										</text>
									</view>
								</template>
							</up-cell>
						</up-cell-group>

						<up-cell-group>
							<up-cell title="【处罚条款】" icon="tags"></up-cell>
							<up-cell>
								<template #title>
									<view class="u-slot-title">
										<text  user-select class="u-cell-text p-text">
											{{data.penalty}}
										</text>
									</view>
								</template>
							</up-cell>
						</up-cell-group>

						<up-cell-group>
							<up-cell title="【处罚内容】" icon="tags"></up-cell>
							<up-cell>
								<template #title>
									<view class="u-slot-title">
										<text  user-select class="u-cell-text p-text">
											{{data.content}}
										</text>
									</view>
								</template>
							</up-cell>
						</up-cell-group>

						<up-cell-group>
							<up-cell title="【执法文书】" icon="tags"></up-cell>
							<up-cell>
								<template #title>
									<view>
										<template v-for="(file, j) in data.doc" :key="j">
											<uni-file-picker v-if="file.fileType == 'image'" :value="file"
												:file-mediatype="file.fileType" return-type="object" :key="file.name"
												readonly></uni-file-picker>
											<view v-else @click="down(file.url)" :key="file.url" class="u-p-l-40"
												hover-class="ha">
												<text class="u-cell-text p-text blue">
													{{file.name}}
												</text>
											</view>
										</template>
									</view>
								</template>
							</up-cell>
						</up-cell-group>
					</view>
				</view>
			</unicloud-db>
		</view>
		<xasa-foot size="12"></xasa-foot>
	</view>
</template>

<script>
	// 由schema2code生成，包含校验规则和enum静态数据
	import {
		enumConverter
	} from '@/js_sdk/validator/xasa-behavior.js';
	import {
		downword
	} from '@/js_sdk/downword.js';

	const db = uniCloud.databaseForJQL();
	const T1 = "xasa-behavior",T2 = "xasa-categories",T3 = "xasa-doc";
	export default {
		data() {
			return {
				id:'',
				topTitle: "执法适用",
				queryWhere: '',

				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				options: {
					// 将scheme enum 属性静态数据中的value转成text
					...enumConverter
				}
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.$nextTick(() => {
				this.$refs.udb.loadData()
			})
			uni.setNavigationBarTitle({
				title: this.topTitle
			});
			//console.log(this.queryWhere)
			//}
		},
		onShow() {

		},
		onReady() {},
		computed: {
			collection() {
				return [
					db.collection(T1).where(`_id=="${this.id}"`).getTemp(),
					db.collection(T2).getTemp(),
					db.collection(T3).getTemp()
				]
			}
		},
		methods: {
			down(url) {
				//#ifdef H5
				if (plus) {
					plus.runtime.openFile(url, '', function(error) {
						console.log('打开外部链接失败：' + error.message);
					})
					//plus.runtime.openURL(url, function(error) {
					//	console.log('打开外部链接失败：' + error.message);
					//})
				}
				//#endif
				//#ifndef H5
				downword(url)
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	.cell-page {
		padding-bottom: 20px;
		background-color: #f3f4f6;		
	}

	.cell-box {
		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			margin: 20px 0px 0px 15px;
		}

		&__block {
			// background-color: #fff;
			margin-top: 10px;
		}
	}

	.u-page {
		padding: 0;

		&__item {
			margin-bottom: 10px;

			&__title {
				color: $u-tips-color;
				padding: 10px 15px;
				margin-bottom: 0px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}

			:deep(.u-cell-group) {
				background-color: #fff;
			}
		}
	}

	.u-slot-title {
		@include flex;
		flex-direction: row;
		align-items: center;
	}

	.u-cell-text {
		font-size: 15px;
		line-height: 22px;
		color: #303133;
		margin-right: 5px;
	}

	.u-slot-value {
		line-height: 17px;
		text-align: center;
		font-size: 10px;
		padding: 0 5px;
		height: 17px;
		color: #FFFFFF;
		border-radius: 100px;
		background-color: #f56c6c;
		/* #ifndef APP-NVUE */
		margin-left: auto;
		/* #endif */
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 20rpx;
	}
	.blue {
		color: #35e;
	}

	.ha {
		color: #aaa;
	}
</style>